<template>
    <div id="background">
        <div id="logo">sea fog</div>
        <div id="login">
            <el-card class="box-card">
                <div id="form">
                    <el-input v-model="username" prefix-icon="el-icon-user-solid" placeholder="请输入用户名"></el-input>
                    <el-input v-model="userpassword" prefix-icon="el-icon-key" placeholder="请输入密码" show-password>
                    </el-input>
                    <el-input v-model="useremail" prefix-icon="el-icon-message" placeholder="请输入邮箱"></el-input>
                </div>
                <div id="butt">
                    <el-button type="primary" v-on:click="back" round>返回</el-button>
                    <el-button type="success" v-on:click="regis" round v-bind:disabled="dis">注册</el-button>
                </div>
            </el-card>
        </div>
        <div id="clock">
            <div id="time">{{time}}</div>
            <div id="date">{{date}}</div>
        </div>
        <div id="copyright">Copyright © 2022 雾海. All Rights Reserved.</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                userid: "",
                username: "",
                userpassword: "",
                useremail: "",
                time: "",
                date: "",
                dis: true,
            }
        },
        mounted() {
            this.$nextTick(() => {
                setInterval(this.update_clock, 1000);
                setInterval(this.ifempty, 300);
            })
        },
        methods: {
            ifempty: function(e){
                if(this.username==""||this.username==null){
                    this.dis = true;
                    return;
                }
                if(this.userpassword==""||this.userpassword==null){
                    this.dis = true;
                    return;
                }
                if(this.useremail==""||this.useremail==null){
                    this.dis = true;
                    return;
                }
                this.dis = false;
            },
            update_clock: function (e) {
                var d = new Date();
                var year = d.getFullYear();
                if (year < 10) {
                    year = "0" + year
                }
                var mon = d.getMonth() + 1;
                if (mon < 10) {
                    mon = "0" + mon
                }
                var day = d.getDate();
                if (day < 10) {
                    day = "0" + day
                }
                var hour = d.getHours();
                if (hour < 10) {
                    hour = "0" + hour
                }
                var minute = d.getMinutes();
                if (minute < 10) {
                    minute = "0" + minute
                }
                this.time = hour + ":" + minute;
                this.date = year + "/" + mon + "/" + day;
            },
            back: function (e) {
                this.$router.push({
                    name: 'Login'
                })
            },
            regis: function (e) {
                this.$axios({
                        url: "http://192.168.139.128:9090/user/insertuser",
                        method: "put",
                        data: {
                            user_name: this.username,
                            user_password: this.userpassword,
                            user_email: this.useremail,
                        },
                    })
                    .then((res) => {
                        alert("你的UID是" + res.data.user_id);
                        this.$router.push({
                            name: 'Login'
                        })
                    })
                    .catch((err) => {
                        console.log(err);
                        console.log(err.response.data.reason);
                        alert(err.response.data.reason);
                    });
            }

        }
    }
</script>

<style scoped>
    #background {
        /* background-color: darkgreen; */

        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-image: linear-gradient(90deg,
                cyan,
                purple);
        background-size: 400%;
        animation: myanimation 10s infinite;
    }

    @keyframes myanimation {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    #logo {
        color: aliceblue;
        font-size: 25px;
        font-weight: 800;
        text-transform: uppercase;
        position: absolute;
        top: 15%;
        left: 15%;
    }

    #login {
        position: absolute;
        top: 30%;
        left: 38%;
    }

    .el-card {
        width: 373px;
        height: 210;
        background-color: rgba(255, 255, 255, 0.4);
        border-radius: 15px;
    }

    #form {
        line-height: 60px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #butt {
        line-height: 30px;
        padding-left: 60px;
        padding-right: 60px;
    }

    #clock {
        color: aliceblue;
        position: absolute;
        top: 70%;
        left: 15%;
        text-align: left;
    }

    #time {
        font-size: 100px;
    }

    #date {
        font-size: 35px;
    }

    #copyright {
        color: aliceblue;
        position: absolute;
        top: 95%;
        left: 38%;
    }
    #copyright {
        color: aliceblue;
        position: absolute;
        top: 95%;
        left: 38%;
    }
</style>